<template>
  <div class="loan-page">
    <div class="zh-logo">众合银华</div>
    <div class="slogan-group">
      <div class="slogan-main">线上申请</div>
      <div class="slogan-sub">极速审批</div>
    </div>
    <div class="slogan-tag">为您"贷"来幸福</div>
    <div class="white-bg"></div>
    <img class="main-bg" src="@/assets/images/mainbg.png" alt="背景图" />
    <img class="top-phone" src="@/assets/images/topPhone.png" alt="顶部手机" />
    <div style="height: 200px;"></div>
      <div class="amount-section">
       <div class="amount-section-bg">
          <div class="amount-title">
            <span class="amount-title-label">最高可借</span>
            <span class="amount-title-money">￥{{ maxAmount.toLocaleString() }}</span>
          </div>
          <div class="amount-input-row">
            <input
              type="text"
              v-model="inputAmountStr"
              @input="onInputAmount"
              @blur="onInputBlur"
              class="amount-input"
            />
          </div>
          <div class="amount-btn-row">
            <button
              v-for="(btnAmount, idx) in [minAmount, avgAmount, maxAmount]"
              :key="btnAmount"
              class="amount-btn"
              :class="{ active: inputAmount === btnAmount }"
              @click="setAmount(btnAmount)"
            >
              <template v-if="idx < 2">￥{{ btnAmount.toLocaleString() }}</template>
              <template v-else>全部借出</template>
            </button>
          </div>
          <div class="term-section">
            <div class="term-header">
              <div class="term-header-row">
                <span class="term-header-title">借款期限</span>
                <span class="term-rate-info">
                  年化利率
                  <span class="term-rate">{{ (rate * 100).toFixed(0) }}%</span>
                  起(单利),实际以审核为准
                </span>
              </div>
            </div>
            <div class="term-blocks">
              <div
                v-for="term in terms"
                :key="term"
                :class="['term-block', term === months ? 'active' : '']"
                @click="selectTerm(term)"
              >
                <span class="term-title">借{{ term }}个月</span>
                <span class="term-monthly">每月应还 {{ getMonthly(term) }}元</span>
              </div>
            </div>
          </div>
          <!-- 立即领取按钮 -->
        <button class="get-btn" @click="showModal = true">立即领取</button>
      </div>
    </div>

  <div style="height: 20px;"></div>
    <!-- 放款流程 -->
    <div class="amount-section">
      <div class="flow-section-bg">
        <div class="flow-title-bg">
          <span class="flow-title-text">放款流程</span>
        </div>
        <div class="flow-steps">
          <div class="flow-step">
            <div class="flow-step-label">step 1.</div>
            <div class="flow-step-content">
              <div class="flow-step-texts">
                <div class="flow-step-title">线上申请</div>
                <div class="flow-step-desc">可在手机上快速填写申请单</div>
              </div>
              <img class="flow-step-img" src="@/assets/images/step1.png" alt="step1" />
            </div>
          </div>
          <div class="flow-step">
            <div class="flow-step-label">step 2.</div>
            <div class="flow-step-content">
              <div class="flow-step-texts">
                <div class="flow-step-title">极速匹配</div>
                <div class="flow-step-desc">最快5秒钟匹配成功</div>
              </div>
              <img class="flow-step-img" src="@/assets/images/step2.png" alt="step2" />
            </div>
          </div>
          <div class="flow-step">
            <div class="flow-step-label">step 3.</div>
            <div class="flow-step-content">
              <div class="flow-step-texts">
                <div class="flow-step-title">线下放款</div>
                <div class="flow-step-desc">最快可5分钟到账</div>
              </div>
              <img class="flow-step-img" src="@/assets/images/step3.png" alt="step3" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="height: 20px;"></div>
    <!-- 平台优势 -->
    <div class="amount-section">
      <div class="flow-section-bg">
        <div class="flow-title-bg">
          <span class="flow-title-text">平台优势</span>
        </div>
        <div class="advantage-list">
          <div class="advantage-item">
            <img class="advantage-img" src="@/assets/images/advantage1.png" alt="专业高效" />
            <div class="advantage-title">专业高效</div>
            <div class="advantage-desc">精选机构,放款效率高</div>
          </div>
          <div class="advantage-item">
            <img class="advantage-img" src="@/assets/images/advantage2.png" alt="合法合规" />
            <div class="advantage-title">合法合规</div>
            <div class="advantage-desc">官方保证,符合法规</div>
          </div>
          <div class="advantage-item">
            <img class="advantage-img" src="@/assets/images/advantage3.png" alt="隐私安全" />
            <div class="advantage-title">隐私安全</div>
            <div class="advantage-desc">安全加密,守护您的隐私</div>
          </div>
          <div class="advantage-item">
            <img class="advantage-img" src="@/assets/images/advantage4.png" alt="陪伴服务" />
            <div class="advantage-title">陪伴服务</div>
            <div class="advantage-desc">专属顾问,服务贴心</div>
          </div>
        </div>
      </div>
    </div>

    <div style="height: 20px;"></div>
    <!-- 底部介绍 -->
    <div class="amount-section">
    <div class="flow-section-bg">
        <div class="intro-text">
          <br/>
          <p>本平台是互联网金融信息服务平台,不提供房贷实业务,平台仅提供的贷款咨询服务与自营放款服务机构或获批支付咨询机构对接提供,您提交的资料仅用于贷款审批,我们会对您的资料严格保密,敬请放心。</p>
          <p>温馨提示：请根据个人能力合理贷款,理性消费,避免逾期。请不要相信任何要求您支付费用的信息、邮件、电话等不实信息。</p>
          <p>客服电话：400-099-1903</p>
          <p>公司：广东粤阿房小额贷款有限公司</p>
          <p>备案号：粤ICP备2023437735号-2</p>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <button class="get-btn bottom-btn" @click="showModal = true">立即领取</button>
  </div>
  <div v-if="showModal" class="modal-mask" @click.self="showModal = false">
    <div class="modal">
      <div class="modal-title">客服电话</div>
      <div class="modal-phone">400-099-1903</div>
      <a class="modal-call-btn" :href="'tel:' + phone">立即拨打</a>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

// 获取type参数
function getTypeFromUrl() {
  // 先取 search
  let params = new URLSearchParams(window.location.search);
  let type = params.get('type');
  if (type) return type;
  // 再取 hash
  if (window.location.hash) {
    let hash = window.location.hash;
    let hashParams = new URLSearchParams(hash.split('?')[1]);
    return hashParams.get('type') || '1';
  }
  return '1';
}

// 生成随机额度区间
function getRandomAmountRange(type) {
  let min, max, step;
  if (type === '2') {
    min = 280000;
    max = 480000;
    step = 20000;
  } else {
    min = 80000;
    max = 180000;
    step = 10000;
  }
  let arr = [];
  for (let i = min; i <= max; i += step) arr.push(i);
  let idx1 = Math.floor(Math.random() * arr.length);
  let idx2;
  do {
    idx2 = Math.floor(Math.random() * arr.length);
  } while (Math.abs(idx1 - idx2) <= 0);
  let [low, high] = [arr[idx1], arr[idx2]].sort((a, b) => a - b);
  if (high - low < step * 2) return getRandomAmountRange(type);
  return [low, high];
}

// 额度选项
function getAmountOptions(low, high) {
  const step = 10000;
  let arr = [];
  for (let i = low; i <= high; i += step) arr.push(i);
  return arr;
}

// 月供计算
function calcMonthlyPayment(principal, months, annualRate) {
  const ratePerMonth = annualRate / 12;
  const pow = Math.pow(1 + ratePerMonth, months);
  const monthlyPayment = (principal * ratePerMonth * pow) / (pow - 1);
  return monthlyPayment.toFixed(2);
}

const type = getTypeFromUrl();
const rate = ref(type === '1' ? 0.15 : 0.11);
const terms = [24, 36, 48];
const phone = '400-099-1903';

const [minAmount, maxAmount] = getRandomAmountRange(type);

// 测试 vConsole 日志
console.log('页面加载完成，type:', type);
console.log('利率:', rate.value);
console.log('最大额度:', maxAmount);
const avgAmount = Math.round((minAmount + maxAmount) / 2 / 10000) * 10000;
const amountOptions = getAmountOptions(minAmount, maxAmount);

const amount = ref(amountOptions[0]);
const inputAmountStr = ref(String(maxAmount));
const inputAmount = ref(maxAmount);
const months = ref(terms[0]);
const showModal = ref(false);

const monthlyPayment = computed(() =>
  calcMonthlyPayment(amount.value, months.value, rate.value)
);

watch(inputAmountStr, (val) => {
  inputAmount.value = Number(val) || minAmount;
});

function setAmount(val) {
  inputAmount.value = val;
  inputAmountStr.value = String(val);
}

function onInputAmount(e) {
  // 只允许输入数字，去除小数点
  let val = e.target.value.replace(/[^0-9]/g, '');
  // 去除前导0
  val = val.replace(/^0+/, '');
  // 限制最大值
  if (val && Number(val) > maxAmount) val = String(maxAmount);
  inputAmountStr.value = val;
}

function onInputBlur() {
  let val = Number(inputAmountStr.value);
  if (isNaN(val) || val < minAmount) val = minAmount;
  if (val > maxAmount) val = maxAmount;
  // 只保留整数
  inputAmountStr.value = String(Math.floor(val));
}

function selectTerm(term) {
  months.value = term;
}

function getMonthly(term) {
  return calcMonthlyPayment(inputAmount.value, term, rate.value);
}
</script>

<style scoped>
.loan-page {
  max-width: 420px;
  margin: 0 auto;
  font-family: "PingFang SC", Arial, sans-serif;
  background: #F9EBDB;
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.white-bg {
  position: absolute;
  top: 60px;
  left: 30px;
  right: 30px;
  height: 355px;
  background: rgba(255,255,255,0.4);
  border-radius: 21px;
  z-index: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.main-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 211px;
  width: 100%;
  height: calc(100% - 211px - 5px);
  z-index: 1;
  pointer-events: none;
  display: block;
  object-fit: fill;
}
.loan-page > *:not(.white-bg):not(.main-bg):not(.top-phone) {
  position: relative;
  z-index: 2;
}

/* 顶部内容流式布局 */
.top-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 16px 0 16px;
}
.top-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zh-logo {
  position: absolute;
  top: 20px;
  left: 52px;
  font-size: 20px;
  color: #FE6011;
  font-weight: bold;
  z-index: 3;
  letter-spacing: 1px;
}
.slogan-group {
  position: absolute;
  top: 72px;
  left: 52px;
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.slogan-main {
  font-size: clamp(36px, calc(100vw / 8 * 0.6), 40px);
  font-weight: bold;
  color: #FE6011;
  line-height: 1;
}
.slogan-sub {
  margin-top: 20px;
  font-size: clamp(36px, calc(100vw / 8 * 0.6), 40px);
  font-weight: bold;
  color: #FE6011;
  line-height: 1;
}
.slogan-tag {
  position: absolute;
  top: 105px;
  left: 52px;
  width: 40%;
  height: 35px;
  border-radius: 35px;
  background: linear-gradient(180deg, rgba(255,240,146,1) 0%, #FC6521 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(14px, calc(100vw / 16 * 0.6), 16px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  z-index: 3;
}
.top-phone {
  position: absolute;
  top: 32px;
  right: -20px;
  width: clamp(200px, 8vw, 234px);
  height: clamp(300px, 8vw, 351px);
  z-index: 2;
  pointer-events: none;
  display: block;
}

.logo {
  font-size: 22px;
  color: #ff7f2a;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: left;
}
.slogan {
  font-size: 22px;
  color: #ff7f2a;
  margin-top: 8px;
  font-weight: bold;
  text-align: left;
}
.banner-img {
  height: 80px;
  margin: 10px auto 0 auto;
}
.amount-section {
  position: relative;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  margin: -20px 20px 16px 20px;
  padding: 16px;
  text-align: center;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: none;
  border-bottom: none;
  overflow: visible;
}
.amount-section-bg {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 0 16px 16px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.amount-section-inner-bg {
  background: #fff;
  border-radius: 12px;
  padding: 18px 12px 12px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.amount-title,
.amount-input-row,
.amount-btn-row,
.term-section {
  margin: 0;
}
.amount-title {
  width: 203px;
  height: 35px;
  margin: 0 auto 16px auto;
  background: url('@/assets/images/maxLoanMoney.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  line-height: 1;
  padding: 0;
}
.amount-title-label {
  font-size: 14px;
  margin-right: 2px;
  color: #fff;
  font-weight: normal;
}
.amount-title-money {
  font-size: 19px;
  color: #fff;
}
.amount-input-row {
  margin: 0 0 20px 0;
}
.amount-input {
  width: 100%;
  height: 58px;
  background: #FFFCF8;
  border-left: 2px solid #CE6B05;
  border-top: 2px solid #CE6B05;
  border-right: none;
  border-bottom: none;
  border-radius: 12px;
  font-size: 20px;
  padding: 0 16px;
  box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 8px rgba(206,107,5,0.06);
}
.amount-btn-row {
  display: flex;
  gap: 10px;
  margin-bottom:20px;
}
.amount-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 45px;
  font-size: clamp(12px, 3vw, 16px);
  border: 1px solid #FBB268;
  color: #FBB268;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-sizing: border-box;
  white-space: nowrap;
}
.amount-btn.active,
.amount-btn:active {
  background: #FBB268;
  color: #fff;
  border: 2px solid #FBB268;
}
.term-section {
  padding: 10px 10px 8px 10px;
  border-left: 2px solid #CE6B05;
  border-top: 2px solid #CE6B05;
  border-right: none;
  border-bottom: none;
  border-radius: 12px;
  background: #FFFCF8;
  box-shadow: 0 2px 8px rgba(206,107,5,0.06);
}
.term-header {
  margin-bottom: 10px;
}
.term-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
}
.term-header-title {
  font-size: clamp(10px, calc(100vw / 8 * 0.6), 12px);
  color: #222;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.term-rate-info {
  color: #909090;
  font-size: clamp(8px, calc(100vw / 30 * 0.6), 10px);
  text-align: right;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.term-rate {
  color: #FF8F1D;
  font-size: 12px;
  font-weight: bold;
  margin: 0 2px;
}
.term-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top:15px;
}
.term-block {
  flex: 0 0 calc(50% - 6px);
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid #FFA774;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
}
.term-block.active {
  background: #FBB268;
  color: #fff;
  border: none;
}
.term-block.active .term-title,
.term-block.active .term-monthly {
  color: #fff;
}
.term-title {
  color: #222;
  font-size: clamp(11px, calc(100vw / 10 * 0.6), 13px);
  font-weight: bold;
  margin-bottom: 10px;
}
.term-monthly {
  color: #909090;
  font-size: clamp(10px, calc(100vw / 22 * 0.6), 11px);
  font-weight: normal;
  margin: 0;
}
.get-btn {
  width: 90%;
  margin: 24px 5% 0 5%;
  background: linear-gradient(180deg, rgba(255,240,146,1) 0%, #FC6521 100%);
  color: #fff;
  font-size: 20px;
  border: none;
  border-radius: 24px;
  padding: 12px 0;
  cursor: pointer;
  font-weight: bold;
}
.bottom-btn {
  margin: 20px 5% 30px 5%;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, #FFA57D 100%);
  color: #F7803A;
}
.section {
  background: #FFFCF8;
  border-radius: 12px;
  margin: 16px 12px;
  padding: 16px;
}
.section-title {
  font-size: 17px;
  color: #ff7f2a;
  font-weight: bold;
  margin-bottom: 12px;
}
.flow-section {
  margin-top: 20px;
  background: transparent;
  border: none;
  padding: 0;
}
.flow-section-bg {
  background: #FFFCF8;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 0px 16px 16px 16px;
}
.flow-title-bg {
  width: 203px;
  height: 35px;
  margin: 0 auto 24px auto;
  background: url('@/assets/images/maxLoanMoney.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-title-text {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  line-height: 1;
  padding: 0;
}
.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.flow-step {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  min-height: 80px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.flow-step-label {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  height: 17px;
  background: #FB7D2D;
  color: #fff;
  font-size: 11px;
  border-radius: 0 8px 8px 0;
  padding: 0 12px;
  min-width: 10%;
  text-align: center;
  line-height: 17px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  z-index: 1;
}
.flow-step-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-left: 20px;
  padding-left: 30px;
  min-width: 0;
}
.flow-step-texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: flex-start;
}
.flow-step-title {
  white-space: nowrap;
  display: block;
  width: 100%;
  font-size: clamp(10px, calc(100vw / 8 * 0.6), 16px);
  color: #F7803A;
  font-weight: bold;
  text-align: left;
}
.flow-step-desc {
  white-space: nowrap;
  display: block;
  width: 100%;
  font-size: clamp(8px, calc(100vw / 24 * 0.6), 14px);
  color: #B29C8F;
  text-align: left;
}
.flow-step-img {
  width: clamp(20px, 8vw, 36px);
  height: clamp(20px, 8vw, 36px);
  margin-right: 10%;
  flex-shrink: 0;
}
.advantage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}
.advantage-item {
  flex: 1 1 0;
  min-width: 40%;
  max-width: 48%;
  background: #ffffff;
  border-radius: 8px;
  padding: 18px 0 10px 0;
  text-align: center;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 1;
}
.advantage-img {
  width: clamp(32px, 12vw, 48px);
  height: clamp(32px, 12vw, 48px);
  margin-top: 10px;
  margin-bottom: 10px;
}
.advantage-title {
  color: #000;
  margin-top: 20px;
  margin-bottom: 4px;
  font-size: clamp(12px, 3vw, 14px);
}
.advantage-desc {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #909090;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intro-section {
  background: #fff7f0;
  border-radius: 12px;
  margin: 16px 12px;
  padding: 16px;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
}
.intro-text {
  text-align: center;
  font-size: 12px;
  color: #000;
  line-height: 1.7;
}
.intro-text p {
  margin: 0 0 5px 0;
}
.modal-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: linear-gradient(
    180deg,
    #FFE9D6 0%,
    #fff 50%,
    #FFE9D6 100%
  );
  border-radius: 32px;
  padding: 40px 32px 32px 32px;
  width: 100%;
  max-width: 500px;
  margin: 0 40px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.modal-title {
  font-size: 24px;
  color: #FFB956;
  font-weight: bold;
  margin-bottom: 24px;
}
.modal-phone {
  font-size: 26px;
  color: #222;
  margin-bottom: 32px;
  font-weight: bold;
}
.modal-call-btn {
  display: block;
  width: 100%;
  background: #FF8F1D;
  color: #fff;
  font-size: 20px;
  border: none;
  border-radius: 32px;
  padding: 14px 0;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  margin: 0 auto;
  margin-top: 10px;
}

@media (max-width: 340px) {
  .advantage-list {
    transform: scale(0.9);
    transform-origin: top center;
  }
}
</style> 